<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="供应商名称"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          v-decorator="[
            'name',
            {
              rules: [{ required: true, message: '请填写供应商名称' }],
              initialValue: this.info.name
            }
          ]"
          placeholder="请填写供应商名称"/>
      </a-form-item>
      <a-form-item
        label="联系人"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          placeholder="请填写供应商联系人"
          v-decorator="[
            'contact',
            {
              rules: [{ required: true, message: '请填写供应商联系人' }],
              initialValue: this.info.contact
            }
          ]"/>
      </a-form-item>
      <a-form-item
        label="手机号"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        extra="供应商将可使用手机号登录供应商独立后台。"
      >
        <a-input
          placeholder="请填写供应商联系方式"
          v-decorator="[
            'phone',
            {
              rules: [
                { required: true, message: '请填写供应商联系方式' },
                { pattern: '^(0|86|17951)?(1[0-9]{2})[0-9]{8}$', message: '请正确填写联系方式' }
              ],
              initialValue: this.info.phone
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        v-if="!isEdit"
        label="密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          placeholder="请填写供应商密码"
          type="password"
          v-decorator="[
            'password',
            {
              rules: [{ required: true, message: '请填写供应商密码' }],
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="紧急联系人"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          placeholder="请填写供应商联系人"
          v-decorator="[
            'emergency_contact',
            {
              initialValue: this.info.emergency_contact
            }
          ]"/>
      </a-form-item>
      <a-form-item
        label="联系人手机号"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          placeholder="请填写联系人手机号"
          v-decorator="[
            'emergency_phone',
            {
              rules: [
                { pattern: '^(0|86|17951)?(1[0-9]{2})[0-9]{8}$', message: '请正确填写联系方式' }
              ],
              initialValue: this.info.emergency_phone
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="联系地址"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-cascader
          expand-trigger="hover"
          :options="areaOptions"
          change-on-select
          allow-clear
          :show-search="true"
          placeholder=""
          v-decorator="[
            'address_cascader',
            {
              initialValue: addressInitialValue,
            }
          ]"
        />
        <a-form-item style="margin-bottom: 0">
          <a-input
            placeholder="请填写详细地址"
            v-decorator="[
              'address',
              {
                initialValue: this.info.hasOwnProperty('address') ? this.info.address : ''
              }
            ]"
          />
        </a-form-item>
        <a-form-item style="margin-bottom: 0">
          <a-button type="link" @click="sameWithReturnAddress">同退货地址</a-button>
        </a-form-item>
      </a-form-item>
      <a-form-item
        label="退货地址"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-cascader
          expand-trigger="hover"
          :options="areaOptions"
          change-on-select
          allow-clear
          :show-search="true"
          placeholder=""
          v-decorator="[
            'return_address_cascader',
            {
              initialValue: returnAddressInitialValue,
            }
          ]"
        />
        <a-form-item style="margin-bottom: 0">
          <a-input
            placeholder="请填写详细地址"
            v-decorator="[
              'return_address',
              {
                initialValue: this.info.hasOwnProperty('return_address') ? this.info.return_address : ''
              }
            ]"
          />
        </a-form-item>
      </a-form-item>
      <a-form-item
        label="营业执照"
        extra="支持扩展名：jpg png.；不超过5M"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-upload
          v-decorator="[
            'business_license',
            {
              valuePropName: 'fileList',
              getValueFromEvent: handleBusinessLicenseChangeNormFile,
            }
          ]"
          name="business_license"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :before-upload="beforeBusinessLicenseUpload"
        >
          <img v-if="businessLicense" :src="businessLicense" alt="avatar"/>
          <div v-else>
            <a-icon :type="businessLicenseLoading ? 'loading' : 'plus'"/>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item
        label="供应商性质"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select
          v-decorator="[
            'nature',
            {
              initialValue: this.info.hasOwnProperty('nature') ? this.info.nature : 1
            }
          ]">
          <a-select-option :value="1">工厂</a-select-option>
          <a-select-option :value="2">经销商</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="经营范围"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >

      </a-form-item>
      <a-form-item
        label="发货时效"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input-number
          v-decorator="[
            'delivery_time',
            {
              initialValue: this.info.hasOwnProperty('delivery_time') ? this.info.delivery_time : 1
            }
          ]"
          :min="1"
          :max="255"
          placeholder="请填写发货失效"/>
      </a-form-item>
      <a-form-item
        label="结算方式"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select :default-value="this.info.hasOwnProperty('settlement_method') ? this.info.settlement_method : '1'">
          <a-select-option value="1">线上</a-select-option>
          <a-select-option value="2">线下</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="收款账号"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          v-decorator="[
            'collection_account',
            {
              initialValue: this.info.hasOwnProperty('collection_account') ? this.info.collection_account : ''
            }
          ]"
          placeholder="请填写收款账号"/>
      </a-form-item>
      <a-form-item
        label="是否支持开票"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-radio-group
          v-decorator="[
            'support_invoicing',
            {
              initialValue: this.info.hasOwnProperty('support_invoicing') ? this.info.support_invoicing : 1
            }]">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        :wrapperCol="{ xs: { span: 24}, sm: { span: 16, offset: 7 } }"
      >
        <a-button htmlType="submit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import md5 from 'md5'
  import options from '@/utils/chinaDivision'
  import { getSupplierInfo, saveSupplier } from '@/api/supplier'

  export default {
    name: 'BaseForm',
    data () {
      return {
        businessLicense: '',
        businessLicenseLoading: false,
        areaOptions: options,
        labelCol: {
          xs: { span: 4 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 8 },
          sm: { span: 8 }
        },

        form: this.$form.createForm(this),
        addressInitialValue: [],
        returnAddressInitialValue: [],
        info: {},
        isEdit: false
      }
    },
    created () {
      if (this.$route.params.hasOwnProperty('id')) {
        this.isEdit = true
        getSupplierInfo(Object.assign(this.$route.params, { original: true })).then(res => {
          this.info = res
          this.addressInitialValue = [this.info.province, this.info.city, this.info.area]
          this.returnAddressInitialValue = [this.info.return_province, this.info.return_city, this.info.return_area]
        })
      }
    },
    methods: {
      beforeBusinessLicenseUpload (a, b, c) {
        console.log('beforeBusinessLicenseUpload', a, b, c)
      },
      handleBusinessLicenseChange (a, b, c) {
        console.log('handleBusinessLicenseChange', a, b, c)
      },
      handleBusinessLicenseChangeNormFile (a, b, c) {
        console.log('handleBusinessLicenseChangeNormFile', a, b, c)
      },
      sameWithReturnAddress () {
        this.form.setFieldsValue({
          'address_cascader': this.form.getFieldValue('return_address_cascader'),
          'address': this.form.getFieldValue('return_address')
        })
      },
      // handler
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (err !== null) {
            return false
          }

          if (!this.isEdit) {
            values.password = md5(values.password)
          } else {
            values.id = this.info.id
          }

          [values.return_province, values.return_city, values.return_area] = values.return_address_cascader;
          [values.province, values.city, values.area] = values.address_cascader

          saveSupplier(values)
            .then(res => {
              this.$router.push('/supplier/supplier/list')
            })
        })
      }
    }
  }
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }

  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
</style>
